<template>
  <div id="profile">
    <nav-bar class="top-bar">
      <h3 slot="center">我的</h3>
    </nav-bar>
    <div class="user-info">
      <div class="user-img"></div>
      <div class="login">
        <p>登录/注册</p>
        <p>暂无绑定手机号</p>
      </div>
    </div>
    <div class="acount">
      <div class="item">
        <p><span>0.00</span>元</p>
        <p>我的余额</p>
      </div>
      <div class="item">
        <p><span>0.00</span>个</p>
        <p>我的优惠券</p>
      </div>
      <div class="item">
        <p><span>0.00</span>分</p>
        <p>我的积分</p>
      </div>
    </div>
    <div class="list">
      <ul>
        <li>我的消息</li>
        <li>积分商城</li>
        <li>会员卡</li>
        <li>我的购物车</li>
        <li>下载购物APP</li>
      </ul>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar.vue";
export default {
  components: { NavBar },
  name: "Profile",
};
</script>

<style scoped>
#profile{
  background: #eee;
  height: 100vh;
}
.top-bar {
  background: var(--color-tint);
  color: #fff;
}
.user-info {
  position: relative;
  display: flex;
  height: 15vh;
  width: 100%;
  background: var(--color-tint);
}
.user-img {
  width: 16vw;
  height: 16vw;
  background: #fff;
  border-radius: 8vw;
  margin-top: 2vh;
  margin-left: 5vw;
}
.login{
  margin-left: 5vw;
  margin-top: 3vh;
  font-size: 16px;
  color: #fff;
}
.login p{
  padding: 1vw;
}
.acount{
  display: flex;
  height: 13vh;
  background: #fff;
}
.item{
  width: 33.3%;
  text-align: center;
  padding-top:2vh ;
  border-right: 1px solid #eee;
}
.item p{
  padding: 1vw 0;
}
.item p span{
  font-size: 6.4vw;
    font-weight: 700;
    color: #ff5f3e;;
}
.list{
  height: 60vh;
  background: #fff;
  margin-top: 2vh;
}
.list li{
  border-bottom: 1px solid #eee;
  height: 6vh;
  margin-left: 10vw;
  line-height: 6vh;
}
</style>
